<template>
  <el-row :gutter="32" class="panel-group">
    <el-col :xs="12" :sm="12" :lg="6">
      <div class="card-panel" @click="handleClick(1)" @mouseleave="changeImageSrc(1, '')"
           @mouseenter="changeImageSrc(1, 'hover')">
        <div class="card-panel-description">
          <p class="card-panel-title">农场信息</p>
          <p>块级面积：<span><count-to :start-val="0" :end-val="landArea" :duration="3000" :decimals="2" /></span> 亩</p>
          <p>地块总数：<span><count-to :start-val="0" :end-val="landNum" :duration="3000" /></span> 块</p>
        </div>
        <div class="card-panel-icon-wrapper"  >
          <img :src="page" alt="">
        </div>
      </div>
    </el-col>
    <el-col :xs="12" :sm="12" :lg="6">
      <div class="card-panel" @mouseleave="changeImageSrc(2, '')"
           @mouseenter="changeImageSrc(2, 'hover')">
        <div class="card-panel-description">
          <p class="card-panel-title">基地天气</p>
          <p>天气情况：<span>晴</span></p>
          <p>区域温度：<span><count-to :start-val="0" :end-val="29" :duration="3000" :decimals="1" /></span> ℃</p>
        </div>
        <div class="card-panel-icon-wrapper">
          <img :src="weather" alt="">
        </div>
      </div>
    </el-col>
    <el-col :xs="12" :sm="12" :lg="6">
      <div class="card-panel" @click="handleClick(3)" @mouseleave="changeImageSrc(3, '')"
           @mouseenter="changeImageSrc(3, 'hover')">
        <div class="card-panel-description">
          <p class="card-panel-title">设备监控</p>
          <p>设备总数：<span><count-to :start-val="0" :end-val="videoNum" :duration="3000" /></span> 台 </p>
          <p>视频总数：<span><count-to :start-val="0" :end-val="156" :duration="3000" /></span> 个</p>
        </div>
        <div class="card-panel-icon-wrapper">
          <img :src="computer" alt="">
        </div>
      </div>
    </el-col>
    <el-col :xs="12" :sm="12" :lg="6">
      <div class="card-panel" @click="handleClick(4)" @mouseleave="changeImageSrc(4, '')"
           @mouseenter="changeImageSrc(4, 'hover')">
        <div class="card-panel-description">
          <p class="card-panel-title">水质数据</p>
          <p>水质数据：<span><count-to :start-val="0" :end-val="waterQuality" :duration="3000"/></span> 条</p>
        </div>
        <div class="card-panel-icon-wrapper">
          <img :src="worm" alt="">
        </div>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import CountTo from 'vue-count-to'
import request from "@/utils/request";

export default {
  components: {
    CountTo
  },
  data() {
    return {
      videoNum: 19,
      deviceTotal: 0,
      landNum: 0,
      landArea: 0,
      waterQuality: 0,
      page:require('@/assets/images/home/page2.png'),
      weather:require('@/assets/images/home/weather.png'),
      computer:require('@/assets/images/home/computer.png'),
      worm:require('@/assets/images/home/worm.png')
    }
  },
  async mounted() {
    await request({
      url: '/equipment/info/sum',
      method: 'get',
    }).then(resp => {
      this.deviceTotal = resp.data;
    })
    await request({
      url: '/farmer/planting-information/sum',
      method: 'get',
    }).then(resp => {
      this.landNum = resp.data.num;
      this.landArea = resp.data.landArea;
    })
    await request({
      url: '/equipment/acquisition-info/sum',
      method: 'get',
    }).then(resp => {
      this.waterQuality = resp.data;
    })
  },
  methods: {
    handleClick(val) {
      if (val === 1) {
        this.$router.push({
          path: "/farmer/management",
        });
      } else if (val === 3) {
        this.$router.push({
          path: "/internet/video",
        });
      } else {
        this.$router.push({
          path: "/irrigation/waterQuality",
        });
      }
    },
    changeImageSrc(key,way) {
      let  tempStr=way==="hover" ? '2' : ''
      switch (key){
        case 1:
          this.page=require(`@/assets/images/home/page${tempStr}.png`)
          break
        case 2:
          this.weather=require(`@/assets/images/home/weather${tempStr}.png`)
          break
        case 3:
          this.computer=require(`@/assets/images/home/computer${tempStr}.png`)
          break
        case 4:
          this.worm=require(`@/assets/images/home/worm${tempStr}.png`)
          break
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.panel-group {
  .card-panel {
    height: 200px;
    margin-bottom: 24px;
    cursor: pointer;
    font-size: 14px;
    position: relative;
    overflow: hidden;
    background: #fff;
    box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    transition: all 0.38s ease-out;

    .card-panel-description {
      float: left;
      margin: 10px 0 0 40px;
      color: #333333;

      .card-panel-title {
        color: #4362ff;
        font-size: 20px;
        font-weight: bold;
      }

      span {
        font-size: 20px;
        font-weight: bold;
      }
    }

    .card-panel-icon-wrapper {
      float: right;
      margin: 100px 35px 0 0;
      transition: all 0.38s ease-out;
    }
  }

  .card-panel:hover {
    background: #4362ff;
    .card-panel-description {
      color: #fff;
      .card-panel-title {
        color: #fff;
      }
    }
  }
}

@media (max-width: 550px) {
  .card-panel-description {
    display: none;
  }

  .card-panel-icon-wrapper {
    float: none !important;
    width: 100%;
    height: 100%;
    margin: 0 !important;

    .svg-icon {
      display: block;
      margin: 14px auto !important;
      float: none !important;
    }
  }
}
</style>
